<template>
  <view>
    <!--#ifdef APP-PLUS-->
    <view class="lz-status_bar">
      <view class="lz-top_view"></view>
    </view>
    <!--#endif-->
	<view>
		<!-- 第一部分 -->
		<view class="box" >
			<view class="kaoshi-baogao">
			   <view class="kaoshi-baogao-title">
				   <view class="kaoshi-baogao-title-l">{{pages_params.score}}</view>分</view>
			</view>
			<view style=" border-top:1px solid #f6f6f6;margin-top:30rpx"></view>
			<view class="kaoshi_yongshi">
				<view>
					 <view class="">
					 	考试名称
					 </view>
					 <view class="">
					 	{{pages_params.exam_name}}
					 </view>
				</view>
				<view style="margin-top:20rpx">
					 <view class="">
					 	考试用时
					 </view>
					 <view class="">
					 	{{use_time}}
					 </view>
				</view>
			</view>
		</view>
	    <!-- 第二部分 -->
		<view  class="box" style="display:flex;justify-content: space-between;text-align:center">
			<view>
				<view class="box_title">
					全站排名
				</view>
				<view class="box_num" style="color:#ff6b6a">
					{{pages_params.rank}}
				</view>
			</view>
			
			<view>
				<view class="box_title">
					试卷最高分
				</view>
				<view class="box_num" style="color:#789ffe">
					{{pages_params.max_scores}}
				</view>
			</view>
			<view>
				<view class="box_title">
					平均分
				</view>
				<view class="box_num" style="color:#db80fb">
					{{pages_params.pingjun}}
				</view>
			</view>
			<view>
				<view class="box_title">
					已击败考生
				</view>
				<view class="box_num" style="color:#44c4ad">
					{{pages_params.jibai}}<span style="font-size:28rpx">%</span>
				</view>
			</view>
		</view>
	    <!-- 第三部分 -->
		<view class="box" >
			<view >
				考试情况
			</view>
			<view class="min_box" >
				<view>
					<view class="box_title1">
						一共
					</view>
					<view class="box_num1" style="color:#789ffe">
						{{pages_params.total_num}}
					</view>
				</view>
				<view class="line" > </view>
				<view>
					<view class="box_title1">
						答对
					</view>
					<view class="box_num1"  style="color:#44c4ad">
						{{pages_params.dadui_num}}
					</view>
				</view>
				<view class="line"> </view>
				<view>
					<view class="box_title1">
						答错
					</view>
					<view class="box_num1"  style="color:#ff6b6a">
						{{pages_params.dacuo_num}}
					</view>
				</view>
				<view class="line"> </view>
				<view>
					<view class="box_title1">
						未答
					</view>
					<view class="box_num1"   style="color:#999">
						{{pages_params.weida_num}}
					</view>
				</view>
				 
			</view>
		</view>
	    <!-- 第四部分 -->
	    <view class="box" style="margin-bottom:30rpx">
	    	<view style="display:flex;justify-content: space-between;">
	    		<view class="">
	    			答题卡
	    		</view>
				<view style="display:flex">
					<view style="display:flex">
					 	<view class="yuan" style="background:#44c4ad"> 
					 	</view>
						<view class="yuan_title">
							正确
						</view>
					</view>
					<view style="display:flex">
						<view class="yuan" style="background:#ff6b6a"> 
						</view>
						<view class="yuan_title">
							错误
						</view>
					</view>
					<view style="display:flex">
						<view class="yuan" style="background:#f6f6f6"> 
						</view>
						<view class="yuan_title">
							未答
						</view>
					</view>
					<view style="display:flex">
						<view class="yuan" style="background:#e19600"> 
						</view>
						<view class="yuan_title">
							老师批阅
						</view>
					</view>
				</view>
	    	</view>
		 
		    <view v-for="(item, index) in pages_params.type_arr" :key="index">
		    	<view style="color:#999;font-weight:600;font-size:30rpx;margin-top:30rpx">
		    		{{item.type_name}}
		    	</view>
		    	<view  style="display:flex;flex-wrap: wrap;">
		    		<!--  @tap="$openrul('/src/pages/mine/notice/noticeDetail/index?id=' + item.id)" question_detail  @tap="$openrul('/pages/examination/examOver/detail?id=' + sonitem.id + '&exam_user_id='+pages_params.examlog_id)"--> 
		    		<view class="number_yuan" v-for="(sonitem, sonindex) in item.son" :key="sonindex" @tap="$openrul('/pages/examination/examOver/detail?id=' + sonitem.id + '&exam_user_id='+pages_params.examlog_id+ '&index='+sonindex)">
		    			<view v-if="sonitem.state==0" style="background:#ff6b6a ;color:#fff">
		    				{{sonitem.number}}
		    			</view>
		    			<view v-if="sonitem.state==1" style="background:#44c4ad;color:#fff">
		    				{{sonitem.number}}
		    			</view>
		    			<view v-if="sonitem.state==2" style="background:#f6f6f6;color:#9c9c9c">
		    				{{sonitem.number}}
		    			</view>
		    			<view v-if="sonitem.state==4" style="background:#789ffe;color:#fff">
		    				{{sonitem.number}}
		    			</view>
		    		</view>
		    		 
		    		 
		    	</view>
		    </view>
			
		 
		</view>
	</view>
	<view style="height: 100rpx;">
		
	</view>
	<image class="exam-over-image" src="http://shuati26.kptedu.com/uploads/image/haibao.png"></image>
	
	<view class="exam-over-bom">
		<view @tap="$openrul('/pagesa/my/examWrongQuestion/detail?id=' + pages_params.examlog_id)">
			考试错题
		</view>
		<view @tap="$openrul('/pagesa/my/examAnalysis/detail?id=' + pages_params.examlog_id + '&exam_id=' + pages_params.exam_id)">
			全部解析
		</view>
	</view>
  </view>
</template>

<script>
  export default {
    data(){
      return {
        pages_params: {},
        id:'',
		
		exam_name :'',
		type_text:'',
		end_time:'',
      }
    },
    computed:{
      up_time() {
				let start = this.pages_params.up_time || 0
				let sec = start;
				let date = new Date(start * 1000)
				let hour = date.getHours();
				let miu = date.getMinutes();
				let s = date.getSeconds();
				// formatDigit
				hour = this.$myUtils.$common.formatDigit(hour)
				miu = this.$myUtils.$common.formatDigit(miu)
				s = this.$myUtils.$common.formatDigit(s)
				return `${hour}:${miu}:${s}`
      },
			use_time () {
				//usetime
				let start = this.pages_params.usetime || 0
				let hour = parseInt(start / 3600);
				let miu = parseInt((start - hour * 3600) / 60);
				let s = start - hour * 3600 - miu * 60;
				// formatDigit
				hour = this.$myUtils.$common.formatDigit(hour)
				miu = this.$myUtils.$common.formatDigit(miu)
				s = this.$myUtils.$common.formatDigit(s)
				return `${hour}:${miu}:${s}`
			}
    },
    components: {},
    onLoad(opts) {
			
			this.id=opts.id,
			 this.type=opts.type,
			 this.exam_name =opts.exam_name,
			 this.type_text=opts.type_text,
			 this.end_time=opts.end_time,
			
			this.get_examReport();
			//console.log(JSON.stringify(this.pages_params.exam_id)+"this.pages_params")
			//console.log(JSON.stringify(this.pages_params)+"this.pages_params")
    },
    methods:{
     
	 async get_examReport() {
		 
	    let res = await this.$myHttp.post({
	         url: this.$myHttp.urlMap.examReport,
	         data: {
	 			   exam_user_id:this.id,
	         },
	         needLogin: true
	     })
	     if (res.code == 1) {
	 		   this.pages_params=res.data
	 		  
	     }
	 },
	 
	 goto_analysis(){
		this.$openrul('/pages/examination/examinationList/analysis?id=' + this.id + '&from_type=' + this.type + '&exam_name=' + this.exam_name + '&title=' + this.type_text + '&end_time=' + this.end_time)
	 }
	 
    }
  };
</script>

<style>
page {
  background: #faf7f7;
}
/*练习报告*/
.kaoshi-question-over {
  background: #fff;
}
.kaoshi-question-over-title {
  width: 90%;
  margin: 0 auto;
  font-size: 16px;
  color: #898f94;
  margin-top: 16px;
  text-align: center;
}
.kaoshi-question-over-content {
  display: flex;
  width: 81%;
  margin: 0 auto;
  justify-content: space-between;
  font-size: 16px;
  color: #9a9a9a;
}
.kaoshi-question-over-content .kaoshi-question-over-content-flex:first-child {
  border-right: solid 1px #f5f5f5;
  flex: 1;
  text-align: center;
}
.kaoshi-question-over-content .kaoshi-question-over-content-flex:last-child {
  line-height: 20px;
  text-align: center;
}
.kaoshi-question-over-content-flex {
  flex: 1;
}
.kaoshi-question-over-content-time {
  color: #000;
  font-size: 20px;
  padding-top: 4px;
}
.kaoshi-question-over-content-num {
  font-size: 16px;
  padding-top: 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.kaoshi-question-over-content-flex span {
  color: #000;
  font-size: 20px;
}
.kaoshi-baogao{
  background: url() no-repeat;
  background-size: contain;
	width: 120px !important;
	height: 120px;
	margin: 0 auto;
	text-align: center;
	color: #000;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.kaoshi-baogao-title{
  padding-top: 32%;
  display: flex;
  align-items: baseline;
}
.kaoshi-baogao-title-l{
  font-size: 32px;
}
.kaoshi_yongshi{ 
	 margin-top:30rpx;
	font-size:28rpx
	
}
.kaoshi_yongshi>view{
	 display:flex;
	 justify-content: space-between;
	
}
.box{
	width:86%;margin:0 auto;margin-top:30rpx;border-radius:20rpx;background:#fff;padding:32rpx 30rpx;
}
.box_title{
	font-size:24rpx;
	color:#999
}
.box_num{
	font-size:50rpx;
	 font-weight:bold;
	 margin-top:20rpx;
}
.box_title1{
	font-size:24rpx;
	color:#999;
	font-weight:blod
}
.box_num1{
	font-size:32rpx; 
	margin-top:20rpx;
}

.min_box{
	background:#f6f6f6;border-radius:20rpx;margin-top:20rpx;padding: 20rpx;display:flex;justify-content: space-between;
}
.min_box>view{
	width:25%;
	text-align:center
}
.line{
	height:80rpx;border-left:1px solid #eee;
	width:0 !important; 
}
.yuan{
	width:20rpx;height:20rpx;
	border-radius: 50%;
	position: relative;
	top: 8rpx;
}
.yuan_title{ 
	font-size:26rpx;
	color:#666;
	margin-left:8rpx;
	margin-right:20rpx;
}
.number_yuan{
	width:20%;
}
.number_yuan>view{
	text-align:center;
	width:90rpx;
	height:90rpx;
	line-height:90rpx;
	margin:0 auto;
	border-radius:50%;
	background:#f6f6f6;
	font-size:30rpx;
	margin-top:30rpx;
	
	
}
.exam-over-bom{
	width: 100%;
	height: 110rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
}
.exam-over-bom>view{
	width: 45%;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 30rpx;
}

.exam-over-bom>view:nth-child(1){
	color:dodgerblue;
	background-color:  #ffffff;
	border: 1rpx dodgerblue solid;
}
.exam-over-bom>view:nth-child(2){
	color: #ffffff;
	background-color: dodgerblue;
}
.exam-over-image{
	    width: 200rpx;
	        height: 200rpx;
	        position: fixed;
	        bottom: 150rpx;
	        right: 10rpx;
	        height: 200rpx;
}
</style>
